<template>
  <div>
    <BreadCrumbShow />

    <div class="search-list">
      <el-form label-width="80px">
        <el-form-item label="盘点时间">
          <el-date-picker
            @change="changePicker"
            v-model="inventoryTimeArray"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            value-format="timestamp"
            :unlink-panels="true"
            :clearable="false"
            :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>

    <div class="inventory-progress">
      <div class="top">
        <div class="left">盘点进度</div>
        <div class="right">
          (共计存储：{{ boxCount }}个窍 {{ labelCount }}个标签)
        </div>
      </div>

      <div class="bottom">
        <el-progress
          :text-inside="true"
          :stroke-width="30"
          :percentage="scanBoxRate"
          :format="format()"
          >sdfsdfsdf</el-progress
        >
      </div>
    </div>

    <div class="tabs-box">
      <el-tabs type="border-card" v-model="status" @tab-click="tabClick">
        <el-tab-pane label="已盘点" name="1">
          <div class="excel-out">
            <ExcelButton @outExcel="outExcel" :isExcelLoading='isExcelLoading' />
          </div>
          <ElTable
            refName="inventoryAlready"
            @pageChange="pageChange"
            :data-source="inventoryList"
            :data-config="tableConfig"
            :total="total"
            :pageSize="pageSize"
            :pageNum="pageNum"
            :isLoading="isLoading"
          >
            <template #labelType="{ scope }">
              <div>
                {{ scope.row.labelType.info }}
              </div>
            </template>
          </ElTable>
        </el-tab-pane>
        <el-tab-pane label="未盘点" name="0">
          <div class="excel-out">
            <ExcelButton @outExcel="outExcel" :isExcelLoading='isExcelLoading' />
          </div>

          <ElTable
            refName="inventoryNot"
            @pageChange="pageChange"
            :data-source="inventoryList"
            :data-config="tableConfig"
            :total="total"
            :pageSize="pageSize"
            :pageNum="pageNum"
            :isLoading="isLoading"
          >
            <template #labelType="{ scope }">
              <div>
                {{ scope.row.labelType.info }}
              </div>
            </template>
          </ElTable>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import ElTable from "@/components/table/ElTable.vue";
import ExcelButton from "@/components/public-style/ExcelButton";
import axios from "axios";
import Cookies from "js-cookie";
import { getInventoryReport, getInventoryRecord } from "@/api/inventory/index";

export default {
  name: "reportCenter",
  components: {
    ElTable,
    ExcelButton,
  },
  data() {
    return {
      pageTitle: "盘点报表",
      inventoryTimeArray: [],
      status: "1", // 1 已盘点 0 未盘点
      boxCount: 0,
      labelCount: 0,
      scanBoxRate: 0,
      inventoryList: [],
      userInfo: {},
      tableConfig: [
        {
          prop: "boxCode",
          label: "窍编号",
        },
        {
          prop: "rackCode",
          label: "所在库位",
        },
        {
          prop: "labelCode",
          label: "标签编码",
        },
        {
          prop: "labelType",
          label: "标签类型",
        },
      ],
      isLoading: false,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      isExcelLoading: false
    };
  },
  mounted() {
    this.userInfo = JSON.parse(Cookies.get("userInfo"));
    this.inventoryTimeArray = [
      new Date(new Date().toLocaleDateString()).getTime() -
        31 * 24 * 3600 * 1000,
      new Date().getTime(),
    ];

    this.getInventoryReport();
    this.getInventoryRecord();
  },
  methods: {
    // 进度条文字格式
    format() {
      return () => {
        return `已盘点窍：${this.scanBoxRate}% `;
      };
    },
    // 获得传参
    getParams() {
      const params = {
        startTime: parseInt(this.inventoryTimeArray[0] / 1000),
        endTime: parseInt(this.inventoryTimeArray[1] / 1000),
        status: this.status,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      return params;
    },
    // 获得盘点报表
    getInventoryReport() {
      getInventoryReport(this.getParams()).then((res) => {
        this.boxCount = res.data.boxCount;
        this.labelCount = res.data.labelCount;
        this.scanBoxRate = Number(res.data.scanBoxRate.replace("%", ""));
      });
    },
    // 获得盘点记录
    getInventoryRecord() {
      this.isLoading = true;
      getInventoryRecord(this.getParams()).then((res) => {
        this.inventoryList = res.data;
        this.total = res.total;

        this.isLoading = false;
      });
    },
    // 盘点时间变化
    changePicker(value) {
      this.status = "1";

      this.getInventoryReport();
      this.getInventoryRecord();
    },

    // 分页点击
    tabClick() {
      this.pageSize = 10;
      this.pageNum = 1;
      this.inventoryList = [];
      this.getInventoryRecord();
    },
    // 分页数据变动
    pageChange(emitData) {
      this.pageNum = emitData.pageNum;
      this.pageSize = emitData.pageSize;
      this.getInventoryRecord()
    },

    // 导出
    outExcel() {
      // axios({
      //   headers: {
      //     Authorization: JSON.parse(Cookies.get("userInfo")).token,
      //   },
      //   url: "/api/iot/scan/exportRecord",
      //   method: "post",
      //   responseType: "blob", // 后台响应数据类型
      //   params: this.getParams(),
      // }).then((response) => {
      //   const url = window.URL.createObjectURL(new Blob([response.data]));
      //   const link = document.createElement("a");
      //   let fname = "盘点报表.xlsx";
      //   link.href = url;
      //   link.setAttribute("download", fname);
      //   document.body.appendChild(link);
      //   link.click();
      // document.body.removeChild(link);
      // });

      // get方法
      this.isExcelLoading = true
      axios
        .get("/api/iot/scan/exportRecord", {
          headers: {
            Authorization: JSON.parse(Cookies.get("userInfo")).token,
          },
          responseType: "blob",
          params: this.getParams(),
        })
        .then((response) => {
          this.isExcelLoading = false
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          let fname = "盘点报表_" + this.$moment(new Date()).format("YYYY-MM-DD") + ".xlsx";

          link.href = url;
          link.setAttribute("download", fname);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.search-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  ::v-deep .el-form {
    flex: 1;
  }
}

.inventory-progress {
  margin-bottom: 20px;
  .top {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    font-size: 17px;
    .left {
      font-weight: bold;
    }
    .right {
      color: #f88123;
    }
  }
  .bottom {
    margin: 5px 0 15px;
  }
}

.tabs-box {
  .excel-out {
    display: flex;
    flex-direction: row-reverse;
    .out-btn {
      display: flex;
      align-items: center;
      font-size: 14px;
      img {
        margin-right: 5px;
        height: 14px;
      }
    }
  }
}

::v-deep  .el-progress-bar__innerText {
  color: #999;
}
</style>
